﻿<p>
    This example shows how to bind Telerik TreeView for ASP.NET MVC to a JSON object.
</p>
<p>
    The required steps are:
</p>
<ol>
    <li>Attach an event handler to the <strong>OnDataBinding</strong> client-side event:
<pre class="prettyprint">
&lt;%= Html.Telerik().TreeView()
        .Name("TreeView")
        .ClientEvents(events => events
            <em>.OnDataBinding("onDataBinding")</em>
        )
%&gt;
</pre>
    </li>
    
    <li>Add a data binding handler function that will load the required data and pass it to the treeview
<pre class="prettyprint">
&lt;script type="text/javascript"&gt;
    function onDataBinding(e) {
        var treeview = $('#TreeView').data('tTreeView');

        <em>var jsonObject = [
            { Value: "1", Text: "Product 1", Expanded: true,
                Items: [
                  { Value: "4", Text: "Product 4" },
                  { Value: "5", Text: "Product 5" },
                  { Value: "6", Text: "Product 6" },
                  { Value: "7", Text: "Product 7" }
              ]
            },
            { Value: "2", Text: "Product 2 (unavailable)", Enabled: false },
            { Value: "3", Text: "Product 3" }
        ]</em>;

        treeview.bindTo(jsonObject);
    }
&lt;/script&gt;
</pre>
    </li>
</ol>